<template>
	<div id="sys_params">
		<main-head><i id="head" class="iconfont iconshengxian-shucai1"></i>蔬菜/瓜果管理</main-head>

		<main-content>
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="创建日期">
					<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" @change="dateSearch()" clearable>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="">
					<el-input v-model="params.merchantId" placeholder="请输入商家id" clearable style="width: 130px;">
					</el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input v-model="params.plotId" placeholder="请输入菜地id" clearable style="width: 130px;"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input v-model="params.name" placeholder="输入蔬菜/瓜果名称模糊搜索" clearable></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-select v-model="params.categoryId" placeholder="蔬菜/瓜果分类" clearable @change="search()">
						<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-select v-model="params.type" placeholder="采种类型" clearable @change="search()">
						<el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" @click="search()"><i class="iconfont iconsousuo"></i>搜索</el-button>
			</el-form>
			<el-table :data="list" stripe style="width: 100%" v-loading="load">
				<el-table-column prop="plotId" label="菜地id" align="center"></el-table-column>
				<el-table-column prop="merchantId" label="商家id" align="center"></el-table-column>
				<el-table-column prop="title" label="标题" align="center"></el-table-column>
				<el-table-column prop="categoryName" label="分类名称" align="center"></el-table-column>
				<el-table-column prop="avatar" label="首图" align="center" width="200">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px; border-radius: 50%" :src="scope.row.avatar" :preview-src-list="scope.row.avatar.split(',')">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="img" label="轮播图" align="center" width="400">
					<template slot-scope="scope">
						<el-image v-for="(item,index) in JSON.parse(scope.row.img)" :preview-src-list="JSON.parse(scope.row.img)" class="img" :src="item">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="overview" label="简介" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="price" label="价格" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.price}}￥
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.status == 0 ? "正常" : "已下架" }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center">
					<template slot-scope="scope">
						<span>{{
              $moment(scope.row.createTime).format("Y-MM-DD HH:mm")
            }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="openDialog(scope.row)">
							<i class="iconfont iconxiangqing-"></i>详情
						</el-button>
						<el-button type="success" size="mini" @click="update(scope.row.id)" v-if="scope.row.status==-1">
							<i class="iconfont iconshangjia1"></i>上架
						</el-button>
						<el-button type="info" size="mini" @click="update(scope.row.id)" v-if="scope.row.status==0">
							<i class="iconfont iconxiajia"></i>下架
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="page" background :layout="
          $store.state.isPhone
            ? 'total, prev, pager, next'
            : 'total, sizes, prev, pager, next, jumper'
        " :current-page.sync="params.pageNo" :page-size.sync="params.pageSize" :total="total" @size-change="search"
				@current-change="getList">
			</el-pagination>

			<!-- 弹框 -->
			<el-dialog title="详情" :visible.sync="dialog" width="55%">
				<el-descriptions :column="4" border title="蔬菜/瓜果详情" direction="vertical" v-if="form.img">
					<el-descriptions-item label="id:" content-class-name="my-content" label-class-name="my-label">
						{{form.plotId}}
					</el-descriptions-item>
					<el-descriptions-item label="名称:" content-class-name="my-content" label-class-name="my-label">
						{{form.title}}
					</el-descriptions-item>
					<el-descriptions-item label="分类:" content-class-name="my-content" label-class-name="my-label">
						<el-tag>{{form.categoryName}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="种摘类型:" content-class-name="my-content" label-class-name="my-label">					
						<el-tag v-if="form.type==0" type="success">可采摘</el-tag>
						<el-tag v-if="form.type==1" type="danger">可种植</el-tag>
						<el-tag v-if="form.type==2" type="warning">全支持</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="首图:" content-class-name="my-content" label-class-name="my-label">
						<el-image :src="form.avatar" style="width: 100px;" :preview-src-list="form.avatar.split(',')"></el-image>
					</el-descriptions-item>
					<el-descriptions-item label="轮播图:" content-class-name="my-content" label-class-name="my-label" >
						<template>
							<el-image v-for="(item,index) in JSON.parse(form.img)" class="img" :src="item" :preview-src-list="JSON.parse(form.img)" >
							</el-image>
						</template>
					</el-descriptions-item>
				</el-descriptions>
				<br />
				<el-descriptions :column="1" border title="内容介绍">
					<el-descriptions-item label="简介:" content-class-name="my-content" label-class-name="my-label">
						{{form.overview}}
					</el-descriptions-item>
					<el-descriptions-item label="视频:" content-class-name="my-content" label-class-name="my-label">
						<video :src="form.video" controls autoplay v-show="videoPlay"></video>
						<el-button type="primary" @click="videoPlay = true" v-if="videoPlay==false">显示视频</el-button>
						<el-button type="danger" @click="videoPlay = false" v-if="videoPlay==true">隐藏视频</el-button>
					</el-descriptions-item>
					<el-descriptions-item label="图文详情:" content-class-name="my-content" label-class-name="my-label">
						<p v-html="form.content"></p>
					</el-descriptions-item>
				</el-descriptions>
				<br />
				<el-descriptions :column="3" border title="采摘情况" v-if="form.type==0||form.type==2">
					<el-descriptions-item label="单价:" content-class-name="my-content" label-class-name="my-label">
						{{form.price}}元每斤
					</el-descriptions-item>
					<el-descriptions-item label="库存:" content-class-name="my-content" label-class-name="my-label">
						{{form.inventory==-1?"无限":form.inventory}}
					</el-descriptions-item>
					<el-descriptions-item label="采摘次数:" content-class-name="my-content" label-class-name="my-label">
						{{form.sale==null?"无":form.sale}}
					</el-descriptions-item>				
				</el-descriptions>
				<br/>
				<el-descriptions :column="3" border title="种植情况" direction="vertical" v-if="form.type==1||form.type==2">
					<el-descriptions-item label="种植单价:" content-class-name="my-content" label-class-name="my-label">
						{{form.growPrice}}元
					</el-descriptions-item>
					<el-descriptions-item label="种植库存:" content-class-name="my-content" label-class-name="my-label">
						{{form.growInventory==-1?"无限":form.growInventory}}
					</el-descriptions-item>
					<el-descriptions-item label="种植数量:" content-class-name="my-content" label-class-name="my-label">
						{{form.count}}
					</el-descriptions-item>						
				</el-descriptions>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialog = false">关 闭</el-button>
				</div>
			</el-dialog>
		</main-content>
	</div>
</template>

<script>
	import editor from '@/components/utils/CustomWangEditor';
	import upload from '@/components/utils/Upload';

	export default {
		components: {
			editor,upload
		},
		data() {
			return {
				typeList: [{
					value: 0,
					label: "可采摘"
				}, {
					value: 1,
					label: "可种植"
				}, {
					value: 2,
					label: "均支持"
				}],
				videoPlay: false,
				categoryList: [],
				//表单Label宽度
				labelWidth: "100px",
				form: {
					avatar: ""
				},
				dialog: false,
				date: "",
				list: [],
				load: false,
				params: {
					name: "",
					pageSize: 10,
					pageNo: 1,
					isCount: true,
					startTime: "",
					endTime: "",
					id: "",
				},
				total: 0,
			};
		},

		mounted() {
			let url = this.$route.fullPath;
			if (url.indexOf("?") != -1) {
				this.params.plotId = url.substr(url.indexOf("=") + 1);
			}
			this.getCategoryList();
			this.search();
		},

		methods: {
			getCategoryList() {
				let type = 2;
				this.$request.post({
					url: "system/sysCategory/listNoPage",
					params: {
						type
					},
					success: (result) => {
						this.categoryList = result
					},
				});
			},
			search() {
				this.params.pageNo = 1;
				this.params.isCount = true;
				this.getList();
			},

			getList() {
				this.load = true;
				this.$request.post({
					url: "admin/merchantManage/vegetableList",
					params: this.params,
					success: (result) => {
						if (this.params.isCount) {
							this.total = result.total;
						}
						this.params.isCount = false;
						this.list = result.list;
					},
					finally: () => {
						this.load = false;
					},
				});
			},

			//时间改变
			dateSearch() {				
				if (this.date != null) {
					this.params.startTime = this.$moment(this.date[0]).format(
						"Y-MM-DD " + "23:59:59"
					);
					this.params.endTime = this.$moment(this.date[1]).format(
						"Y-MM-DD " + "23:59:59"
					);
				} else {
					this.params.startTime = ""
					this.params.endTime = ""
				}
				this.search();
			},
			//修改状态
			update(id) {
				this.$request.post({
					url: "admin/merchantManage/upOrDown",
					params: {
						id
					},
					success: (result) => {
						this.$message.success(result);
						this.search();
					},
				});
			},
			cleanDialog() {
				this.form = {};
			},
			openDialog(row) {
				this.cleanDialog();
				//浅拷贝				
				this.form = JSON.parse(JSON.stringify(row));	
				console.log(this.form)
				this.dialog = true;
				this.videoPlay = false;	
				
				
			},
		},
	};
</script>

<style>
</style>

<style scoped>
	.page {
		text-align: right;
		margin-top: 20px;
	}

	#head {
	
		font-size: 30px;
	}

	.img {
		width: 20%;
		height: 15%;
		border-radius: 10%;
		margin-left: 10px;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
		-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 3px 3px 3px rgba(81, 81, 81, 0.5);
	}

	.iconfont {
		font-size: 10px;
		margin-right: 3px;
	}
</style>
